<template>
  
        <div class="goodsEntry">
            <!-- <div>入库单</div> -->
            <el-form :inline="true" style="padding: 20px">
                <el-form-item label="扫码录入日期：">
                    <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                  
                    v-model="endtime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeTime">
            </el-date-picker>
                </el-form-item>
                <el-form-item label="关键字搜索：">
              <el-input style="width: 300px;" v-model="queryData.goodsId" placeholder="请输入商品ID,商品名称" size="medium"></el-input>
                  
                </el-form-item>
                <!-- <el-form-item label="商品分类：">
                    <el-select v-model="categoryvalue" size="medium" @change="changecatey">
                        <el-option :value="item.value" :label="item.label" v-for="item in category" :key="item.index"></el-option>
                       
                      </el-select>
                      <el-select v-model="queryData.goodsKindSecond" size="medium">
                          <el-option :value="item.id" :label="item.name" v-for="item in goodsKindSecond" :key="item.index"></el-option>
                        </el-select>
                </el-form-item> -->
                <el-form-item label="">
                    <el-button type="primary" size="medium" @click="query">查询</el-button>
                    <!-- <el-button type="primary" size="medium" @click="exportData">导出</el-button> -->
                    
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" size="medium" @click="okentry">查看入库明细</el-button>
                    
                </el-form-item>
                
            </el-form>
            
            <el-form :inline="true" style="padding: 0 20px">
                <el-form-item label="仓库">
                  <el-select v-model="storeId" size="medium" @change="handleChange">
                      <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
                    </el-select>
                    <el-select v-model="inputAreaId" size="medium" @change="handleChangetype">
                        <el-option :value="item.id" :label="item.areaName" v-for="item in deptData" :key="item.index"></el-option>
                      </el-select>
                </el-form-item>
                <el-form-item label="">
                      <span >{{inType}}余量 : {{unusedNum}}{{unit}}</span>
                      <!-- <span  v-else>(新酒货位)余量 : {{unusedNum}}</span> -->
                  </el-form-item>
                  <el-form-item label="">
                    <el-input v-model="goodsId" autofocus @keyup.enter.native="smentry"  style="width:250px" placeholder="请录入商品ID"></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" size="medium" @click="smentry()">确定录入</el-button>
                </el-form-item>
                <el-form-item label="" style="margin-left:50px">
                  <el-button type="primary" size="medium" @click="confirmation">确认入库</el-button>
                  <el-button type="warning" size="medium" @click="canceloffAll">取消录入</el-button>
                </el-form-item>
            </el-form>
          <!-- <el-row class="entry-info">
              <el-col :span="7"  class="goods-id">
                  <input type="text" @keyup.enter="smentry()" autofocus style="width:250px" v-model="goodsId">
                <el-button type="primary" size="small" @click="smentry()">确定录入</el-button>
              </el-col>
              <el-col :span="6" :offset="1" class="btn-wrapper">
                
                </el-col>
          </el-row> -->
          
          <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border @selection-change="handleSelectionChange">
             <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column align="center" type="selection">
                </el-table-column>
              <el-table-column align="center" prop="goods_id" label="商品ID">
              </el-table-column>
              <el-table-column align="center" prop="create_time" label="扫码录入时间" width="100">
              </el-table-column>
              <el-table-column align="center" prop="area_name" label="录入位置">
                </el-table-column>
              <el-table-column align="center" prop="goods_no" label="商品编码">
              </el-table-column>
              <el-table-column align="center" prop="goods_name" label="商品名称">
              </el-table-column>
              <el-table-column align="center" prop="sku_no" label="SKU编码">
              </el-table-column>
              <el-table-column align="center" prop="goods_kind_first" label="商品类别">
              </el-table-column>
              <el-table-column align="center" prop="odorType" label="香型">
              </el-table-column>
              <el-table-column align="center" prop="netContent" label="净含量">
              </el-table-column>
              <el-table-column align="center" prop="alocohl" label="酒精度">
              </el-table-column>
              <el-table-column align="center" prop="unit" label="单位" width="50">
              </el-table-column>
              <el-table-column align="center" prop="area_name" label="位置">
              </el-table-column>
              <el-table-column align="center" prop="raw_desc" label="原料">
              </el-table-column>
              <el-table-column align="center" prop="address" label="操作" width="150">
                <template slot-scope="scope">
                  <span class="canceloff-btn" @click="canceloffOne(scope.row)">取消录入</span>
                </template>
              </el-table-column>
            </el-table>
           
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10,20,30]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
          </div>
          
          <audio id="myaudio" src="../../../viode/004.mp3" controls="controls" hidden="hidden" ></audio>
          <audio id="warn" src="../../../viode/warn.mp3" controls="controls"  hidden="hidden"></audio>
        </div>
      </template>
      
      <script>
        import exportExcel from '../../../axios/export.js'
        import { mapState,mapGetters, mapMutations, mapActions } from "vuex";
        export default {
          data() {
            return {
              height: "auto",
              queryData: {
                startTime:'',
                endTime:'',
                goodsId:'',
                // goodsKindSecond:''
              },
              goodsId:'',
              goodsKindSecond:[],
              categoryvalue:'',
              category:[],
              goodsCates: {
                show: false,
                tableData: [{}]
              },
              tableData: [],
              
              endtime:'',
              page: {
                pageSize: 10,
                current: 1,
                total: null
              },
              //联动
              options:[],
              selectedOptions:[],
              deptData:[],
              storeId:'',//仓库
              inputAreaId:'',//货位
              inType:'',//类型
              unusedNum:'',
              goodsIds:'',
              categoryarr:[],//仓库
              unit:''
            };
          },
          computed: {
            ...mapState({
              categoryLists:state => state.common.Warehouse
            })
          },
          mounted () {
            this.categoryList();
            this.tableList();
            this.area();
            this.getWarehouse();
           
          },
          watch: {
            categoryLists(data){
              this.categoryarr = data.data.data
              console.log(data)
            }
          },
          methods: {
            
            ...mapActions({
              getWarehouse:'getWarehouse'
            }),
            ...mapMutations({
            setWarehouse:'SET_WAREHOUSE'
            }),
           
             //初始化数据
          async tableList() {
              try {
                let { data } = await this.$post({
                  api: "/show/allstoreid",
                  data:{
                    current:this.page.current,
                    pageSize:this.page.pageSize,
                    startTime:this.queryData.startTime,
                    endTime:this.queryData.endTime,
                    goodsId:this.queryData.goodsId,
                    status:0,
                    // goodsKindSecond:this.queryData.goodsKindSecond,
                    
                  }
                });
                if (data.code === 0) {
                  this.tableData = data.data;
                  this.page.total = data.rdPage.total;
                  // this.page.total = data.rdPage.total;
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
          },
            //商品分类接口
          async categoryList() {
          try {
            let { data } = await this.$post({
              api: "/show/leftmenu",
             
            });
            if (data.code === 0) {
             
              this.category.push({
                value:data.data[0].id,
                label:data.data[0].name
              })
             
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            this.$message({
              type: "error",
              message: "接口报错"
            });
          }
       },
       async categoryid(id) {
          try {
                let { data } = await this.$post({
                  api: "/show/propertyInfo",
                  data:{
                    id:id
                  }
                });
                if (data.code === 0) {
                  // console.log(data)
                
                  this.goodsKindSecond = data.data.attrKeyList;
                } else {
                  // this.$message({
                  //   type: "error",
                  //   message: data.msg
                  // });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
          },
          changecatey(id){
            this.categoryid(id)
            
          },
          //扫描入库
          async factoryGoods() {
              try {
                let { data } = await this.$post({
                  api: "/scan/factoryGoods",
                  data:{
                    goodsId:this.goodsId,
                    storeId:this.storeId,
                    inputAreaId:this.inputAreaId,
                    inType:this.inType
                  }
                });
                if (data.code === 0) {
                  this.tableList();
                  this.$message({
                  type: "success",
                  message: data.msg
                 });
                
                 this.autoplays();
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                  this.warnplay();
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
            //音频录入
            autoplays(){
             let audio =  document.getElementById('myaudio')
             audio.currentTime = 0
             audio.play();
            // this.$netxTick(function(){
              // console.log(document.getElementById('myaudio'), 999)
               
            //  })
           },
           //
           warnplay(){
             let warn = document.getElementById('warn');
             warn.currentTime = 0
             warn.play();
           },
          //二维码录入
          smentry(){
            if(this.storeId == '' && this.inputAreaId == ''){
              this.$message({
                  type: "error",
                  message: '请选择仓库和货位'
                 });
            }else{
              this.factoryGoods();
              this.goodsId = '';
            }
          },
           //取消录入
          async storegoods() {
              try {
                let { data } = await this.$post({
                  api: "/delete/storegoods",
                  data:{
                    goodsIds:this.goodsIds
                   
                  }
                });
                if (data.code === 0) {
                  this.tableList();
                  this.$message({
                  type: "success",
                  message: data.msg
                 });
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
           },
           //确认录入
          async addstoregoods() {
              try {
                let { data } = await this.$post({
                  api: "/sure/add/storegoods",
                  data:{
                    goodsIds:this.goodsIds
                  }
                });
                if (data.code === 0) {
                  this.tableList();
                  this.$message({
                  type: "success",
                  message: data.msg
                 });

                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
           },
           //仓库
           async area() {
            
              try {
               
                let { data } = await this.$post({
                  api: "/show/store/area"
                  
                });
                
                if (data.code === 0) {
                  this.selectedOptions = data.data;
                console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           //根据仓库id货位
           async areainfo(id) {
              try {
                let { data } = await this.$post({
                  api: "/show/store/areainfo",
                  data:{
                    storeId:id
                  }
                });
                if (data.code === 0) {
                  
                  this.deptData = data.data;
                  // this.inType = data.data[0].areaType;
                  // this.unusedNum = data.data[0].unusedNum;
                console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           //根据仓库找数量
           async numinfo(id) {
              try {
                let { data } = await this.$post({
                  api: "/show/area/num",
                  data:{
                    // areaId:this.storeId,
                    areaId:id
                  }
                });
                if (data.code === 0) {
                  
                  // this.deptData = data.data;
                  this.inType = data.data.area_type;
                  this.unusedNum = data.data.unused_num;
                  this.unit = data.data.unit;
                console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           
           handleChangetype(id){
             this.numinfo(id)
            //  console.log(id)
            },
           //导出
           async goodsexcel() {
              try {
                let { data } = await this.$post({
                  api: "/import/goodsexcel",
                  data:{
                    // current:this.page.current,
                    // pageSize:this.page.pageSize,
                    startTime:this.queryData.startTime,
                    endTime:this.queryData.endTime,
                    goodsId:this.queryData.goodsId,
                    status:0,
                    // goodsKindSecond:this.queryData.goodsKindSecond
                  }
                });
                if (data.code === 0) {
                  let urlstr = url+data.data.replace('static/','');
                window.location.href=urlstr
                console.log(urlstr)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
           },
           //货位两级联动
          //  async addarea() {
          //     try {
          //       let { data } = await this.$post({
          //         api: "/show/store/area"
                  
          //       });
          //       if (data.code === 0) {
          //       //  console.log(data)
          //         data.data.forEach(function(element,index){
          //           let storeAreaList = element.storeAreaList;
          //           let pindex = index; 
          //           this.deptData.push({
          //             value:element.id,
          //             label:element.storeName,
          //             children:[]
          //           })
          //           storeAreaList.forEach(function(element,index){
          //            this.deptData[pindex].children.push({
          //                  value: element.id,
          //                  label: element.areaName,
          //             })
          //             // this.alldata[pindex] = {
          //             //   inType:element.areaType,
          //             //   unusedNum :element.unusedNum 
          //             // }
                      
          //             // console.log(this.alldata)
          //           },this)

          //         },this);
                 
                   
          //       } else {
                 
          //       }
          //     } catch (e) {
               
          //     }
          //  },
            //查询
            query() {
              console.log(111)
              this.tableList()
            },
            //导出
            exportData(){
              this.$confirm("确认将导出记录，您确定要导出吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.goodsexcel();
                
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消导出"
                });
              });
             
              // exportExcel()
            },
            //查看入库明细
            okentry(){
              this.$router.push('/FactoryEntryListDetail/num')
            },
            //确认入库
            confirmation(){
             
              if(this.goodsIds == ''){
                this.$message({
                  type: "error",
                  message: "请选择对应商品的勾选框"
                });
              }else{
                this.addstoregoods()
              this.goodsId = '';
              }
            },
            canceloffAll() {
              if(this.goodsIds == ''){
                this.$message({
                  type: "error",
                  message: "请选择对应商品的勾选框"
                });
              }else{
                this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.storegoods();
                
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
              }
            },
            canceloffOne(row) {
              
              this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.goodsIds = row.goods_id;
                this.storegoods();
                // this.$message({
                //   type: "success",
                //   message: "删除成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            },
            handleCurrentChange(val) {
              this.page.current = val;
              this.tableList();
              console.log(val);
            },
            handleSizeChange(val){
              this.page.pageSize = val;
              this.tableList();
            },
            showCateDialog() {
              this.goodsCates.show = true;
            },
            //时间选择器
            changeTime(arr){
              // console.log(arr)
              if(arr != null){
                this.queryData.startTime = arr[0];
                this.queryData.endTime = arr[1];
              }else{
                this.queryData.startTime = '';
                this.queryData.endTime = '';
              }
             
            },
            //联动选择
            handleChange(id) {
             this.inputAreaId = '';
             this.areainfo(id)
           },
           //多选id
           handleSelectionChange(val){
            let array = [];
              val.forEach(element => {
                array.push(
                   element.goods_id
                )
              });
              
            this.goodsIds = array.join(',');
            //  console.log(val)
           }
          }
        };
      </script>
      
      <style lang="scss" scoped>
        .query {
          overflow: hidden;
          border-bottom: 1px solid #eeeeee;
          &-item {
            float: left;
            margin: 15px 20px;
          }
          .el-input {
            width: 150px;
          }
          .el-button {
            margin: 0 15px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      
        .entry-info {
          padding: 15px 20px;
          border-bottom: 1px solid #eeeeee;
        }
      
        .goods-category {
          line-height: 32px;
          span {
            color: #0033ff;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      
        .goods-count {
          line-height: 32px;
        }
      
        .goods-id {
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          span {
            position: relative;
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #333;
            &:after {
              content: "";
              position: absolute;
              top: -6px;
              left: -6px;
              width: 100%;
              height: 100%;
              padding: 6px;
              border: 1px solid #333;
            }
          }
        }
      
        .wrapper {
          padding: 10px 15px;
        }
      
        .canceloff-btn {
          color: #0033ff;
          cursor: pointer;
        }
      </style>
    